import React,{Suspense,useState} from "react";
import { useLocation,useNavigate } from "react-router-dom";
import Zan from "../../../components/Zan";
import MakDown from "../../../components/MakDown";
import Floor from "../../../components/Floor";
import RetTop from "../../../components/RetTop";
import DetailArticle from "../../../components/DetailArticle";
import Share from "../../../components/Share";
import { Tabbar } from 'react-vant'
import { Button, Modal } from 'antd';
import {alipay} from '../../../api/alipay'
import {
  MessageOutlined,
  HeartTwoTone,
  ShareAltOutlined,
} from "@ant-design/icons";
import { useDispatch } from "react-redux";
import { Anchor } from "antd";
type Props = {};

const Index = (props: Props) => {
  const navigate=useNavigate()
  const location = useLocation().state;
  const dispatch = useDispatch();
  const [name, setName] = React.useState('setting')
  
  const [isModalOpen, setIsModalOpen] = useState( location.totalAmount? true:false);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
    let token= localStorage.getItem('token')
    if(token){
      alipay({orderid:Math.floor(Math.random()*10000000000 +1 )+'',total:location.totalAmount}).then(res=>{
        if(res.data.code===200){
          window.open(res.data.result)
          }
      })
    }else{
      navigate('/login')
    }
    
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 详情页数据
  dispatch({
    type: "MACKDOWNLOCATION",
    payload: location,
  });
  //分享数据
  dispatch({
    type: "SHARE",
    payload: location,
  });
  return (
    <div className="detailbox">
       <Modal title="确认以下收费信息"  footer={[
          <Button key="back" onClick={handleCancel}>
            取消
          </Button>,
          <Button key="submit" type="primary"  onClick={handleOk}>
            立即支付
          </Button>,
        
        ]} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>支付金额￥{location.totalAmount}</p>
       
      </Modal>
      {/* 返回顶部 */}
      <RetTop></RetTop>
      {/* 左侧点赞 评论 分享 */}
      <div className="like" style={{ position: "fixed", left: "50px", top: "50%" }}>
        <Zan></Zan>
        <p>
          <MessageOutlined />
        </p>
        <p>
          <Share />
        </p>
      </div>
      <div className="DetailLeft">
        {/* img */}
        <div className="img">
          <img src={location.cover} alt="" />
        </div>
        {/* 文章 */}
        <MakDown></MakDown>
      </div>

      <div className="DetailRight">
        <Anchor offsetTop={20 }>
          <div className="Top">
          <h3>推荐阅读</h3>
            <DetailArticle></DetailArticle>
          </div>
          <div className="Bom">
            <h3>目录</h3>
            <Floor></Floor>
          </div>
        </Anchor>
      </div>
      <div className='demo-tabbar'>
      <Tabbar value={name} onChange={v => setName(v as string)}>
        <Tabbar.Item name='home' >
        <Zan></Zan>
        </Tabbar.Item>
        <Tabbar.Item name='search'>
        <MessageOutlined style={{fontSize:"24px" }}  />
        </Tabbar.Item>
        <Tabbar.Item name='firends' >
        <Share  />
        </Tabbar.Item>
      
      </Tabbar>
    </div>
   
    </div>
  );
};

export default Index;
